<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://lib.baomitu.com/d3/4.10.2/d3.min.js"></script>
  <script src="https://s4.ssl.qhres.com/!928fb688/spritejs.min.js"></script>
  <script src="https://s0.ssl.qhres.com/!e6cf89ec/sprite-extend-d3axis.js"></script>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    #scene-container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="scene-container"></div>
  <script>
(function () {
  const paper = new spritejs.Scene('#scene-container', {
    viewport: ['auto', 'auto'],
    resolution: [800, 600],
    stickMode: 'height',
    stickExtend: true,
  })

  const layer = d3.select(paper).append('fglayer')

  const width = 1330
  const height = 520

  const projection = d3.geoMercator()
    .center([107, 38])
    .scale(width / 2 - 40)
    .translate([width / 4 + 80, height / 2])

  const path = d3.geoPath().projection(projection)

  d3.json('https://s1.ssl.qhres.com/static/6c6d50baf39026d5.json', (err, data) => {
    if(err) throw new Error(err)

    // console.log(data, path)
    let selectedTarget = null

    layer.selectAll('path')
      .data(data.features)
      .enter()
      .append('path')
      .attr('strokeColor', '#EBF1FA')
      .attr('lineWidth', 1)
      .attr('d', path)
      .attr('renderMode', 'fill')
      .attr('fillColor', '#C7D9F0')
      .on('click', (d) => {
        const paths = d3.event.target.findPath(d3.event.offsetX, d3.event.offsetY)

        if(paths.length) {
          /* eslint-disable no-console */
          console.log(d.properties.name)
          /* eslint-enable no-console */
        }
      })
      .on('mousemove', (d) => {
        const event = d3.event
        if(event.target !== selectedTarget) {
          const paths = event.targetPaths

          if(paths.length) {
            if(selectedTarget) {
              selectedTarget.attr('fillColor', '#C7D9F0')
            }
            selectedTarget = event.target
            event.target.attr('fillColor', '#c73')
          }
        }
      })
  })
}())
  </script>
</body>
</html>